<template>
  <cus-list ref="list" has-page :default="params" :auto-request="true" url="/admin/knowledgeManager/queryPage" :headers="{'Content-Type': 'application/json'}" :emptyShow="false"> 
    <template v-slot="{ data }" >
      <div :class="data.knowIsShow? 'courseClick' : 'course'" @click="data.knowIsShow = !data.knowIsShow" >
        <div class="course-img">
          <img src="/src/assets/knowledge-element/arrow-click.png" alt="" v-if="!data.knowIsShow">
          <img src="/src/assets/knowledge-element/arrow-noclick.png" alt="" v-else>
        </div>
        <div class="course-title">{{ data.title }}</div>
        <div class="left" v-if="data.questionSum || data.knowledgeNames">
          <span>（ </span>
          <div class="course-topic" v-if="data.questionSum" :style="{ 'marginRight': '10px' }">共<span>{{ data.questionSum }}</span>题</div>
          <div class="course-knowledge" v-if="data.knowledgeNames">包含<span>{{ data.knowledgeNames.length }}</span>个知识点</div>
          <span> ）</span>
        </div> 
        <div class="btns" v-if="choice">
          <el-button type="primary" size="small" v-if="!(!!checkedList.find(p => p.id === data.id || p.knowledgeId === data.id ))" @click.stop="addChoice(data)" round>选择</el-button>
          <el-button type="primary" size="small" v-else-if="!!checkedList.find(p => p.id === data.id|| p.knowledgeId === data.id )" @click.stop="cancelChoice(data)" round>取消选择</el-button>
        </div>
        <div class="btns" v-else>
          <el-button type="primary" size="small" @click.stop="edit(data)" round>编辑</el-button>
          <el-button type="primary" size="small" @click.stop="del(data, index)" round>删除</el-button>
        </div>
      </div>
      <div class="knowledge" v-if="data.knowIsShow && data.knowledgeNames">
        <div v-for="item in data.knowledgeNames" :key="item" class="knowledge-content">
          <div class="knowledge-title">知识点</div>
          <div>{{ removeHtml(item)}}</div>
        </div>
      </div>
    </template>
    <template v-slot:emptySlot>
      <Careful :knowledgeId="params.knowledgeId"/>
    </template>
  </cus-list>
</template>
<script lang="ts">
import { ref, onMounted, Ref, watch, computed } from 'vue';  
import KnowledgeMould from "./../knowledge-mould/index.vue";
import { ElMessage } from 'element-plus';
import Careful from "./../careful/index.vue";
import $, { emitter } from "$";
import store from './../knowledge-mould/store/index'
import DeleteComponents from './delete.vue'

export default {
  components: { Careful },
  props: {
    choice: {
      type: Boolean,
      default: () => false
    },
    onAddChange: {
      type: Function,
      default: () => (() => {})
    },
    disabledList: {
      type: Array,
      default: () => []
    },
    subjectId: String
  },
  setup(props, { emit }) {
    let isShow = ref(false)
    let listLoading = ref(true)
    let params = ref({ knowledgeIds: [], current: 1, size: 10, subjectId: '', title: '' })
    let pageData = ref([])
    let list: Ref<any> = ref()
    let removeHtml = computed(() => { return (data) => { return data.replace(/<[^>]+>/g,"") } })
    if (props.subjectId) {
      params.value.subjectId = props.subjectId
    } else {
      emitter.emit('effect', (subject) => params.value.subjectId = subject)
    }
    onMounted(() => {
      emitter.on('data-transmit', (e) => { params.value.knowledgeIds = e })
      watch(() => params.value.subjectId, (e) => params.value.knowledgeIds = [])
    })

    let checkedList: Ref<any[]> = ref([]);     // 选中的知识元集合
    // checkedList.value = props.disabledList
    let noUrlList = ref()
    emitter.on('knowledge-init', () => { list.value.request(params.value)})
    const addChoice = (data) => {
      checkedList.value.push(data)
      props.onAddChange(checkedList.value);
    }
    const cancelChoice = (data) => {
      checkedList.value.map((item, index) => {
        (item.id === data.id || item.knowledgeId === data.id) && checkedList.value.splice(index, 1)
      })
      props.onAddChange(checkedList.value);
    }
    const edit = (data) => {
      store.commit('set_paper_title', data.title)
      store.commit('set_manage_id', data.id)
      $.screen.create( KnowledgeMould, { data, subjectId: params.value.subjectId }, { zIndex: '2000', hiddenBack: false }).finally(() => {
        list.value.request(params.value)
        store.commit('set_paper_init', []);
      })
    }
    const del = (data) => {
      $.modal.create({
        title: '删除知识元',
        width: 520,
        component: DeleteComponents,
        props: { deleteData: data }
      }).then(() => {
        $.http.post('/admin/knowledgeManager/deleteAllById',{ id: data.id}).then((res) => {
          if(res.result) { 
            ElMessage.success('已删除~！')
            list.value.request(params)
          }else {
            ElMessage.error(res.msg);
          }
        })
      })
    }
    return { pageData, edit, params, del, isShow, list, addChoice, cancelChoice, checkedList, listLoading, noUrlList, removeHtml }
  }
}
</script>
<style lang="scss" scoped>
  .container {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
  }
  .course-img {
    height: 24px;
    line-height: 24px;
  }    
  .course {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    &-title {
      margin-left: 10px;
      margin-right: 15px;
      font-size: 16px;
      font-weight: 500;
      color: #333333;
    }
    .left {
      display: flex;
      &>div {
        color: #999999;
        &>span {
          color: #FAAD14;
        }
      }
    }
    .btns {
      margin-left: auto;
    }
  }
  .courseClick {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    background: #fff;
    border-left: 5px solid #72b22a;
    box-shadow: 0px 2px 11px 0px rgba(23, 18, 45, 0.2);
      &-title {
      margin-left: 12px;
      margin-right: 15px;
      font-size: 16px;
      font-weight: 500;
      color: #333333;
    }
    .left {
      display: flex;
      &>div {
        color: #999999;
        &>span {
          color: #FAAD14;
        }
      }
    }
    .btns {
      margin-left: auto;
      .el-button {
        background: #72b22a;
        color: #fff;
        border: #72b22a;
      }
    }
  }
  .knowledge {
    border: 1px solid #72b22a;
    border-top: 0;
    border-radius: 0 0 4px 4px;
    background: #fff;
    &-title{
      margin-left: 52px;
      color: #FAAD14;
      margin-right: 10px;
      // font-weight: 600;
    }
    &-content{
      margin-top: 2px;
      height: 40px;
      line-height: 40px;
      display: flex;
      &:nth-child(2n-1){
        background: #EFF2F5;
      }
    }
    
  }
  :deep(.cus__list__item) {
    cursor: pointer;
    background: #EFF2F5;
    border-radius: 4px;
    padding: 0 !important;
    .el-button{
      padding: 0px 19px;
      height: 24px;
      font-size: 14px;
      background: #fff;
      color: #72b22a;
      border: #fff;
    }
    &:hover{
      background: #fff;
      box-shadow: none;
    }
    &:hover .course, &:hover .courseClick{
      border-left: 5px solid #72b22a;
      box-shadow: 0px 2px 11px 0px rgba(23, 18, 45, 0.2);
    }
    &:hover .el-button{
      background: #72b22a;
      color: #fff;
      border: #72b22a;
    }
  }

  .content {
    width: 100%;
    height: 100%;
    padding: 45px 30px;
  }
  
</style>